<template>
  <div class="no-data">
    <img src="@/assets/img/favor/empty_favorite.44731802.png" alt="">
    <div class="name">暂无收藏</div>
    <div class="desc">
      <span class="start">点击</span>
      <img class="icon" src="@/assets/img/favor/favor.png" alt="">
      <span class="end">即可收藏对应的房东</span>
    </div>
    <button class="btn" @click="btnClick">随便去逛逛</button>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const btnClick = () => {
    router.push("/home")
  }
</script>

<style lang="less" scoped>
  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
    }

    .name {
      font-size: 18px;
      color: #333;
    }

    .desc {
      font-size: 14px;
      color: #666;
      margin: 20px 0;
      
      .icon {
        width: 12px;
        margin: 0 3px;
      }
    }

    .btn {
      color: #fff;
      background-color: var(--primary-color);
      padding: 0 38px;
      height: 40px;
      width: 156px;
      line-height: 40px !important;
      font-size: 16px;
      border-radius: 20px;
      border: none;
      outline: none;
    }
  }
</style>